<template>
  <div class="screen-container">
    <header class="screen-header">
      <div>
        <img src="/static/img/header_border_dark.png"/>
      </div>
      <!--搜索框-->
      <span class="selects">
        <el-row>
        <el-select v-model="admissionyear" placeholder="入学年份" size="mini" style="width: 100px">
          <el-option label="2019" value="2019"></el-option>
          <el-option label="2020" value="2020"></el-option>
          <el-option label="2018" value="2018"></el-option>
        </el-select>
        <el-select v-model="academy" placeholder="学院" size="mini" style="width: 150px;margin-left: 5px">
          <el-option label="信息技术学院" value="信息技术学院"></el-option>
          <el-option label="化学化工学院" value="化学化工学院"></el-option>
        </el-select>
          </el-row>
      </span>
      <span class="title">高校新生报到数据可视化</span>
      <div class="title-right">
        <!-- <img src="/static/img/qiehuan_dark.png" class="qiehuan" /> -->
<!--        <i class="el-icon-back" style="margin-right: 20px" @click="$router.push('/manage')"></i>-->
        <el-button round plain icon="el-icon-back" size="mini" @click="$router.push('/manage')" style="margin-right: 5px">返回</el-button>
        <span class="datetime">{{ currentTime }}</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top">
          <!-- 报到实时信息 -->
          <studentRoll :admissionyear="admissionyear" :academy="academy" :status="status"></studentRoll>
        </div>
        <div id="left-bottom">
          <!-- 专业热度榜 -->
          <majorRoll :admissionyear="admissionyear" :academy="academy" :status="status"></majorRoll>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top">
          <div class="middle-top-left">
            <admissionNumber :totalCount="totalCount" :admissionCount="admissionCount"></admissionNumber>
          </div>
          <div class="middle-top-right">
            <dv-decoration-9 style="width: 7.5rem;height: 7.5rem;">{{ admissionRate }}%</dv-decoration-9>
          </div>
        </div>
        <div id="middle-bottom">
          <!-- 学生分布图 -->
          <studentMap :admissionyear="admissionyear" :academy="academy" :status="status"></studentMap>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top">
          <age :admissionyear="admissionyear" :academy="academy" :status="status"></age>
        </div>
        <div id="right-medium">
          <sex :admissionyear="admissionyear" :academy="academy" :status="status"></sex>
        </div>
        <div id="right-bottom">
          <fname :admissionyear="admissionyear" :academy="academy" :status="status"></fname>
        </div>
      </section>
    </div>
  </div>
</template>

<script>

import Fname from "@/components/bigScreen/Fname";
import StudentMap from "@/components/bigScreen/StudentMap";
import StudentRoll from "@/components/bigScreen/StudentRoll";
import MajorRoll from "@/components/bigScreen/MajorRoll";
import Age from "@/components/bigScreen/Age";
import Sex from "@/components/bigScreen/Sex";
import AdmissionNumber from "@/components/bigScreen/AdmissionNumber";

export default {
  // 监听学院和入学年份的变化
  watch: {
    admissionyear: {
      handler(newValue, oldValue) {
        this.getCount()
      }
    },
    status: {
      handler(newValue, oldValue) {
        this.getCount()
      }
    },
    academy: {
      handler(newValue, oldValue) {
        this.getCount()
      }
    }
  },
  data() {
    return {
      currentTime: '',
      t: null, // 定时器标识，用于右上角的时间实时显示
      admissionyear: 2019,
      academy: '信息技术学院',
      totalCount: 0,
      admissionCount: 0,
      admissionRate: '',
      timerId:null, // 定时器标识，每5分钟刷新一次可视化页面
      status:true // 定时器控制其改变，子组件监听status的改变并重新获取数据
    }
  },

  mounted() {
    this.t = setTimeout(this.getCurrentTime, 1000) //启动定时器
    this.getCount()
    this.startInterval()
  },
  destroyed() {
    clearInterval(this.timerId)
    clearTimeout(this.t)
  },
  methods: {
    getCount() {
      this.request.get("/stuScreen/stuCount", {
        params: {
          admissionyear: this.admissionyear,
          academy: this.academy
        }
      }).then(res => {
        if (res.code == 20041) {
          this.totalCount = res.data.totalCount
          this.admissionCount = res.data.admissionCount
          this.admissionRate = (res.data.admissionRate) * 100
        }
      })

    },
    getCurrentTime() {
      if (this.t) {
        clearTimeout(this.t)
      }
      let dt = new Date();
      let y = dt.getFullYear();
      let mt = dt.getMonth() + 1;
      let day = dt.getDate();
      let h = dt.getHours();//获取时
      let m = dt.getMinutes();//获取分
      let s = dt.getSeconds();//获取秒
      this.currentTime = y + '-' + mt + '-' + day + '-' + h + ':' + m + ':' + s
      this.t = setTimeout(this.getCurrentTime, 1000);
    },
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.getCount()
        this.status=!this.status
      }, 60000*5);
    }
  },

  components: {
    fname: Fname,
    studentMap: StudentMap,
    studentRoll: StudentRoll,
    majorRoll: MajorRoll,
    age: Age,
    sex: Sex,
    admissionNumber: AdmissionNumber
  },
};
</script>
<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  //color用来设置字体颜色
  color: #fff;
  box-sizing: border-box;
}

.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;

  > div {
    img {
      width: 100%;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }

  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }

  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }

  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }

  .selects {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
}

.screen-body {
  width: 100%;
  height: 100%;
  // 弹性布局
  display: flex;
  margin-top: 10px;

  .screen-left {
    height: 100%;
    width: 27.6%;

    #left-top {
      height: 44%;
      position: relative;
    }

    #left-bottom {
      height: 44%;
      margin-top: 15px;
      position: relative;
    }
  }

  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;

    #middle-top {
      width: 100%;
      height: 20%;
      display: flex;

      .middle-top-left {
        flex: 2;
      }

      .middle-top-right {
        flex: 1;
      }
    }

    #middle-bottom {
      margin-top: 15px;
      width: 100%;
      height: 68%;
      position: relative;
    }
  }

  .screen-right {
    height: 100%;
    width: 27.6%;

    #right-top {
      height: 31%;
      position: relative;
    }

    #right-medium {
      height: 31%;
      position: relative;
      margin-top: 7.5px;
    }

    #right-bottom {
      height: 26%;
      margin-top: 7.5px;
      position: relative;
    }
  }
}

//section > div {
//  border: 1px solid red;
//}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>
